<template>
  <div :class="wrpCls" >
    <avatar-dropdown
      :menu="showMenu"
      :current-user="currentUser"
      :class="prefixCls"
    />
    <div class="swatchs">
      <!-- 角色下拉 -->
      <a-dropdown v-if="role.includes('36') || role.includes('223') || role.includes('35') || role.includes('1')" style="top:20px">
        <a class="ant-dropdown-link">
          {{ dropText }}
          <a-icon type="down" />
        </a>
        <template #overlay>
          <a-menu>
            <a-menu-item key="0" @click="setDropText($t('Uportalbtn'))">
              <router-link to="/Portal">
                {{ $t("menu.Portal1") }}
              </router-link>
            </a-menu-item>
            <a-menu-item key="1" v-if="role.includes('36') || role.includes('223')" @click="setDropText($t('dco.portal'))">
              <router-link to="/dcoPortal">
                {{ $t("dco.portal") }}
              </router-link>
            </a-menu-item>
            <!-- 发生产 -->
            <!-- <a-menu-item key="2" v-if="role.includes('35') || role.includes('1')" @click="setDropText($t('menu.DashBoard'))">
              <router-link to="/DashBoard">
                {{ $t("menu.DashBoard") }}
              </router-link>
            </a-menu-item> -->
          </a-menu>
        </template>
      </a-dropdown>

      <div class="center">
        <a-dropdown disabled>
          <span class="ant-dropdown-link">
            <a-icon type="question-circle" /> {{ $t("helptxt") }}
          </span>
          <template slot="overlay">
            <div class="box">
              <!-- <div class="title">
                <h2>{{ $t("data-governance-tools") }}</h2>
              </div> -->
              <div class="list" v-for="(item, index) in lidt" :key="index">
                <div
                  class="content"
                  @click="openNew(item.ConfigurationItemsAnnotation)"
                >
                  <div class="blue"></div>
                  <span>{{
                    isLang
                      ? item.ConfigurationItemsContent
                      : item.ConfigurationItemsContentEn
                  }}</span>
                </div>
              </div>
            </div>
          </template>
        </a-dropdown>
      </div>
      <a-switch
        checked-children="English"
        un-checked-children="中文"
        @click="switchYuyan"
        :checked="switchStatus"
        :style="{ backgroundColor: switchColor }"
      />
      <!-- 消息中心 -->
      <!-- <div class="ml-5">
       

        <a-dropdown>
          <a-badge :count="928" :overflow-count="99">
            <a-icon type="bell" style="font-size: 16px; cursor:pointer" />
          </a-badge>
          
          <template slot="overlay">
            <div class="bellBox w-14 h-14 bg-white">
              我是消息
            </div>
          </template>
        </a-dropdown>

      </div> -->
      
    </div>
    
   
  </div>
</template>

<script>
import AvatarDropdown from "./AvatarDropdown";
import { loadLanguageAsync } from "@/locales/index";
import { configurationLists } from "@/api/configs";
import { getUserInfo } from "@/api/index";
export default {
  name: "RightContent",
  components: {
    AvatarDropdown,
  },
  props: {
    prefixCls: {
      type: String,
      default: "ant-pro-global-header-index-action",
    },
    isMobile: {
      type: Boolean,
      default: () => false,
    },
    topMenu: {
      type: Boolean,
      required: true,
    },
    theme: {
      type: String,
      required: true,
    },
  },

  methods: {
    async getlist() {
      // 调用查询列表
      const { data } = await configurationLists({
        ...{ page: 1, pageSize: 10, ConfigurationItemsState: 13 },
      });
      this.lidt = data.Lists;
    },
    // 切换中英文
    async switchYuyan() {
      this.switchStatus = !this.switchStatus; // 切换开关状态
      this.switchColor = this.switchStatus ? " rgb(24, 144, 255)" : "#52C41A"; // 根据状态修改颜色
      if (this.switchStatus) {
        loadLanguageAsync("zh-EN");
      } else {
        loadLanguageAsync("zh-CN");
      }
    },
    // 打开新页面
    openNew(e) {
      window.open(e);
    },
    async getText() {
      // 发生产
      // if (this.role.includes('35') || this.role.includes('1')) {
      //   if (this.lang == 'zh-EN') {
      //     this.dropText = 'DashBoard'
      //   }else if (this.lang == 'zh-CN'){
      //     this.dropText = '运维管理'
      //   }
      // } else
      if (this.role.includes('36') || this.role.includes('223')) {
        if (this.lang == 'zh-EN') {
          this.dropText = 'DCO Portal';
        }else if (this.lang == 'zh-CN'){
          this.dropText = 'DCO 首页'; 
        }
      }
    },
    setDropText(text) {
      this.dropText = text;
    },

  },
  data() {
    return {
      showMenu: true,
      currentUser: {},
      switchStatus: localStorage.getItem("lang").includes("zh-EN"),
      switchColor: localStorage.getItem("lang").includes("zh-EN") ? "rgb(24, 144, 255)" : "#52C41A",
      lidt: [],
      isLang: true,
      role:'',
      dropText: '',
      lang: 'zh-EN',
    };
  },
  computed: {
    wrpCls() {
      return {
        "ant-pro-global-header-index-right": true,
        [`ant-pro-global-header-index-${
          this.isMobile || !this.topMenu ? "light" : this.theme
        }`]: true,
      };
    },
  },
  async mounted() {
    this.$bus.$on('getDropText', (dropText) => {
      this.dropText = dropText;
      console.log('this.dropText', this.dropText);
    });

    this.currentUser = {
      name: this.$store.getters.nameAliasCH,
    };
    this.getlist();
    let that = this;
    window.addEventListener("setItemEvent",  e => {
      if (e.key == "lang") {
        let lang = JSON.parse(e.value);
        if (lang == "zh-EN") {
          that.isLang = false;
          this.lang = 'zh-EN'

        } else {
          that.isLang = true;
          this.lang = 'zh-CN'

        }
      }
    });
    
    //获取用户信息
    const { data } = await getUserInfo();
    this.role = data.role;
    this.getText()

  },
};
</script>

<style scoped lang="less">
* {
  font-family: bmwTypeGlobalRegularBold, bmwTypeGlobalRegular !important;
}
.swatchs {
  position: absolute;
  top: -1px;
  right: 140px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.center {
  width: 100px;
  position: relative;
  margin-left: 20px;
  > span {
    cursor: pointer;
  }
}
.content {
  background-color: #fff;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.blue {
  width: 5px;
  height: 5px;
  background-color: rgb(98, 19, 148);
  margin-right: 16px;
}
.list {
  width: 250px;
  cursor: pointer;
  padding: 4px 0;
  border-top: 1px solid #f5f5f5;
}
.title {
  padding: 10px 0;
  > h2 {
    font-size: 18px;
    font-weight: 600;
  }
}
.box {
  padding: 12px 10px;
  background-color: #fff;
}
.ant-dropdown-menu-item, .ant-dropdown-menu-submenu-title {
  padding: 1px 12px !important;
}

.ant-dropdown-menu {
  top: -17px !important;
}

/deep/.ant-badge-count {
  width: 14px;
  height: 14px;
  line-height: 14px;
  border-radius: 50%;
  padding: 0;
  min-width: 13px;
  font-size: 7px;
  box-shadow: none;
}

</style>
